<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的筛选器</title>
</head>

<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5
            <i>子两级</i>
        </li>
        <i>子一级</i>
        <span>我是ul内的一个span标签</span>
        <li>6</li>
        <li>7
            <p>
                <i>子三级</i>
            </p>
        </li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <script src="./jquery.js"></script>
    <script>
        /*
        筛选器
        */

        //1.first()
        // console.log($('li').first())

        //2.last()
        //  console.log($('li').last())

        //3.eq(索引)
        //注意：索引从0开始，依次+1
        // console.log($('li').eq(3))

        //4.next()
        // console.log($('span').next())

        //5.nextAll()
        // console.log($('span').nextAll())

        //6.prev()
        // console.log($('span').prev())//span前一个元素

        //7.prevAll
        // console.log($('span').prevAll())//span前面所有元素

        //8.parent()
        // console.log($('span').parent())//拿到的是ul元素

        //8.parents()
        //注意：获取到的是该元素所有父级结构，逐层获取，直到html标签为止
        // console.log($('span').parents())

        //10.siblings()
        //注意：拿到该元素的所有兄弟元素
        // console.log($('span').siblings())

        //11.find(选择器)
        //注意：拿到该元素的所有后代元素中，满足选择器要求的元素
        console.log($('ul').find('i'))

    </script>


</body>

</html>